<template>
  <div class="city_body">
    <div ref="wrapper" class="wrapper">
      <!-- <scroller ref="city-list"> -->
      <div class="city_list">
        <div class="city_hot">
          <h2>热门城市</h2>
          <ul class="clearfix">
            <li v-for="item in hotCities" :key="item.id" @click="handleToCity(item.name,item.id)">{{item.name}}</li>
          </ul>
        </div>
        <div class="city_sort">
          <div v-for="(item,key) in citiesList" :key="key" :ref="key">
            <h2>{{key}}</h2>
            <ul>
              <li v-for="city in item" :key="city.id" @click="handleToCity(city.name,city.id)">{{city.name}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- </scroller> -->
    <div class="city_index">
      <ul>
        <li v-for="(item,key) of citiesList" :key="key"  @click="handleLetterClick" >{{key}}</li>
      </ul>
    </div>
  </div>

</template>

<script>
import Bscroll, { ObserveDom } from 'better-scroll'
export default {
    name:'City',
    data () {
      return {
        hotCities:[],
        citiesList:[],
        letter:''
      }
    },
    methods: {
      getCityInfo (res) {
        res = res.data
        if(res.ret){
          const data = res.data
          this.hotCities = data.hotCities
          this.citiesList = data.cities
        }
      },
      handleLetterClick (e) {
        this.letter = e.target.innerText
      },
      handleToCity (nm,id) {
        this.$store.commit('city/CITY_INFO',{nm,id});
        window.localStorage.setItem('nowNM',nm);
        window.localStorage.setItem('nowID',id);
        this.$router.push('/movie/nowPlaying')
      }
    },
    mounted () {
      this.axios.get('/mock/cities.json').then(this.getCityInfo)
      this.scroll = new Bscroll(this.$refs.wrapper,{observeDOM:true,click:true,tap:true})
    },
    watch: {
      letter () {
        if(this.letter) {
          const element = this.$refs[this.letter][0]
          this.scroll.scrollToElement(element)
          console.log(element);
        }
      }
    }
}
</script>

<style scoped>
#content .city_body{ margin-top: 45px; display: flex; width:100%; position: absolute; top: 0; bottom: 0;}
#content .wrapper{width: 100%; }
.city_body .city_list{ flex:1; overflow: auto; background: #FFF5F0;width: 100%;}
.city_body .city_list::-webkit-scrollbar{background-color:transparent; width:0;}
.city_body .city_hot{ margin-top: 20px;}
.city_body .city_hot h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_hot ul li{ float: left; background: #fff; width: 29%; height: 33px; margin-top: 15px; margin-left: 3%; padding: 0 4px; border: 1px solid #e6e6e6; border-radius: 3px; line-height: 33px; text-align: center; box-sizing: border-box;}
.city_body .city_sort div{ margin-top: 20px;}
.city_body .city_sort h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_sort ul{ padding-left: 10px; margin-top: 10px;}
.city_body .city_sort ul li{ line-height: 30px; line-height: 30px;}
.city_body .city_index{ width:20px; height:100%;display: flex; flex-direction:column; justify-content:center; text-align: center; }

</style>